<template>
  <el-dialog width="45%" v-model="visible" :title="dialogTitle" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false">
    <div class="dialog-content">
      <div class="pad-lt-40">
        <span class="func-name">({{ params }}) => </span>
        <span class="func-name">{</span>
      </div>
      <div class="func-body">
        <MonacoEditor
          v-model="funcBody"
          :language="language"
          :height="450"
          :options="{ lineNumbers: 'on', theme: 'vs' }"
        />
      </div>
      <div class="func-name pad-lt-40">}</div>
    </div>
    <template #footer>
      <div class="wft-edit-handler-footer">
        <div>
          <el-alert type="success" :closable="false">
            <template #title>
              <slot name="tips">
                <p><b>1. </b>如果您在配置响应拦截器返回了「response」那么上面「res.data」为服务器响应数据</p>
                <p><b>2. </b>如果您在配置响应拦截器返回了「response.data」那么上面「res」为服务器响应数据</p>
              </slot>
            </template>
          </el-alert>
        </div>
        <div>
          <el-button size="small" @click="visible = false">取消</el-button>
          <el-button size="small" type="primary" @click="saveHandle">保存</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { useMessage } from '@/hooks';
import MonacoEditor from '../../MonacoEditor/index.vue'
import { ref } from 'vue'

withDefaults(defineProps<{
  language?: string,
  dialogTitle?: string,
  params?: string
}>(), {
  language: 'javascript',
  dialogTitle: '函数编辑器',
  params: 'res'
})

const emits = defineEmits<{
  (e: 'saveHandle', data: string): void
}>()

const visible = ref(false)
const funcBody = ref('')

const init = (handle: string) => {
  visible.value = true
  funcBody.value = handle
}

const saveHandle = () => {
  useMessage().success('保存成功!')
  visible.value = false
  emits('saveHandle', funcBody.value)
}

defineExpose({ init })
</script>
<style scoped>
.dialog-content {
  padding-left: 15px;
  box-sizing: border-box;
}

.func-body {
  width: 100%;
  height: 500px;
  padding: 6px 0;
  box-sizing: border-box;
}

.func-title,
.func-name {
  font-size: 18px;
}

.func-title {
  color: #9867ae;
}

.func-name {
  color: #9867ae;
}

.wft-edit-handler-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  transform: translateY(5px);
}

.wft-edit-handler-footer > div:nth-of-type(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  flex: 1;
}

.ysbth {
  font-family: 'ysbth';
}

.pad-lt-40 {
  padding-left: 40px;
}
</style>
